<template>
  <div class="stationInfo-page">
    <a-tabs v-model:activeKey="state.tabActive" tab-position="left">
      <a-tab-pane key="1" tab="基本信息">
        <div class="station_info">
          <div class="left_info">
            <table class="tableInfo">
              <tbody>
                <tr>
                  <td class="fieldName">测站名称</td>
                  <td>{{ state.infoData !== null ? state.infoData.stnm : "" }}</td>
                  <td class="fieldName">测站编码</td>
                  <td>{{ state.infoData !== null ? state.infoData.stcd : "" }}</td>
                </tr>
                <tr>
                  <td class="fieldName">管理单位</td>
                  <td>{{ state.infoData !== null ? state.infoData.unit : "" }}</td>
                  <td class="fieldName">建设单位</td>
                  <td>{{ state.infoData !== null ? state.infoData.unit : "" }}</td>
                </tr>
                <tr>
                  <td class="fieldName">负责人</td>
                  <td>{{ state.infoData !== null ? state.infoData.dutyPeople : "" }}</td>
                  <td class="fieldName">联系方式</td>
                  <td>{{ state.infoData !== null ? state.infoData.phone : "" }}</td>
                </tr>
                <tr>
                  <td class="fieldName">经度</td>
                  <td>{{ state.infoData !== null ? state.infoData.lgtd : "" }}</td>
                  <td class="fieldName">纬度</td>
                  <td>{{ state.infoData !== null ? state.infoData.lttd : "" }}</td>
                </tr>
                <tr>
                  <td class="fieldName">所属灌区</td>
                  <td>
                    {{ state.infoData !== null ? state.infoData.positionName : "" }}
                  </td>
                  <td class="fieldName">关联渠道</td>
                  <td>{{ state.infoData !== null ? state.infoData.channelName : "" }}</td>
                </tr>
                <tr>
                  <td class="fieldName">测站地址：</td>
                  <td colspan="3">
                    {{ state.infoData !== null ? state.infoData.stlc : "" }}
                  </td>
                </tr>
                <tr>
                  <td class="fieldName">备注：</td>
                  <td colspan="3">
                    {{ state.infoData !== null ? state.infoData.comments : "" }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="right_map">
            <div class="img_body">
              <a-carousel arrows autoplay v-if="state.infoData?.files.length > 0">
                <template #prevArrow>
                  <div class="carouselArrow" style="left: 10px; z-index: 1">
                    <left-circle-filled />
                  </div>
                </template>
                <template #nextArrow>
                  <div class="carouselArrow" style="right: 10px">
                    <right-circle-filled />
                  </div>
                </template>
                <div v-for="(item, index) in state.infoData.files" :key="index">
                  <a-image
                    width="100%"
                    height="100%"
                    :src="urlhttp + '/' + item.path"
                    @click="state.visible = true"
                  />
                </div>
              </a-carousel>
              <div v-else class="noImage">
                <img width="80%" height="80%" :src="noImage" />
                <p>暂无图片</p>
              </div>
            </div>
            <div class="map_body">
              <GlobalOlMap />
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import { getStbprpbInfo } from "@/api/realTime/realData";
import { GlobalOlMap } from "@/components/GlobalOlMap";
import { addMapData } from "./addMapData";
import noImage from "@/assets/svg/no-image.svg";
import { LeftCircleFilled, RightCircleFilled } from '@ant-design/icons-vue';

defineOptions({ name: "StationInfo" });
const urlhttp = window.localStorage.getItem("GET_IMG_HTTP");
const state = reactive({
  tabActive: "1",
  infoData: null,
  chartOption: null,
  visible: false,
});

const props = defineProps({
  data: { type: Object },
});

const getStationDataInfo = async () => {
  const infoData = await getStbprpbInfo({ stcd: props.data.stcd });
  addMapData(infoData);
  state.infoData = infoData;
};

onMounted(async () => {
  setTimeout(() => {
    getStationDataInfo();
  }, 50);
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.stationInfo-page {
  width: 100%;
  height: 100%;
  min-height: 500px;
  .station_info {
    height: 100%;
    display: flex;
    justify-content: space-between;
    .left_info {
      width: 50%;
      .tableInfo {
        width: 100%;
        tr td {
          border: 1px solid #eee;
          padding: 8px 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        tr td:nth-child(1),
        tr td:nth-child(3) {
          width: 15%;
          // min-width: 120px;
          background: #fafafa;
          color: #333;
        }
        tr td:nth-child(2),
        tr td:nth-child(4) {
          width: 35%;
          // min-width: 200px;
          color: #111;
        }
      }
    }
    .right_map {
      width: 49%;
      height: 100%;
      .img_body {
        height: 49%;
        margin-bottom: 1%;
      }
      .map_body {
        height: 50%;
        border: 1px solid #eee;
      }
      .noImage {
        width: 100%;
        height: 100%;
        background: #f5f5f5;
        display: flex;
        align-items: center;
        flex-direction: column;
        img {
          width: 80%;
          height: 80%;
        }
        p {
          color: #666;
          margin-top: -20px;
        }
      }
    }
  }
  .content {
    width: 100%;
    height: 80%;
  }
}
.ant-carousel {
  width: 100%;
  height: 100%;
  :deep(.slick-slider) {
    text-align: center;
    height: 100%;
    overflow: hidden;
    .slick-list {
      height: 100%;
      .slick-track {
        height: 100%;
        .slick-slide {
          height: 100%;
          & > div {
            height: 100%;
            & > div {
              height: 100%;
            }
          }
        }
      }
    }
  }
  .carouselArrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
    z-index: 1;
  }
  .slick-prev::before, .slick-next::before {
    content: '';
  }
  .custom-slick-arrow:befor {
    display: none;
  }
  .carouselArrow:hover {
    opacity: 0.6;
  }
}
</style>
